<template>
  <div class="search">
    <form @submit.prevent="searching">
      <div class="content">
        <i class="icosearch"></i>
        <input type="text" v-model="keywords" @input="inputing" placeholder="搜索歌曲、歌手、专辑"/>
      </div>
      </form>
        <component :is="componentName" :keywords="keywords" @play="$emit('play',$event)" @search="searchChange"></component>
  </div>
</template>
<script>
  import HotSearch from '@/components/HotSearch'
  import SearchSuggest from '@/components/SearchSuggest'
  import SearchResult from '@/components/SearchResult'
export default {
  name:'Search',
  data(){
    return {
      componentName:"HotSearch",
      keywords:''
    }
  },
  created(){

  },
  components:{
    HotSearch,
    SearchSuggest,
    SearchResult
  },
  methods:{
    inputing(e){
      if(e.target.value==''||e.target.value==' '){
        this.componentName="HotSearch"
      }else{
        this.keywords=e.target.value
        this.componentName="SearchSuggest"
      }
    },
    searching(){
      this.componentName="SearchResult"
    },
    searchChange(e){
      this.keywords=e;
      this.componentName="SearchResult"
    }
  },
  searching(){
    this.componentName="SearchResult"
  }
}
</script>
<style lang="less" scoped>
.search{
  // margin-top: 40px;
  padding: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, .1);
  div.content{
    display: flex;
    padding: 8px 18px;
    border-radius: 30px;
    background-color: #ebecec;
    margin: 10px 0;
    i{
      &.icosearch{
        width: 15px;
        height: 15px;
        background-image: url();
      }
    }
    input{
      flex: 1;
      border: none;
      outline: none;
      background-color: #ebecec;
      text-indent: 1em;
    }
  }
}
</style>